<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/weadmin.css">
	<link rel="stylesheet" href="/lib/jqueryZtree/3.5.12/css/zTreeStyle/zTreeStyle.min.css">
	<script type="text/javascript" src="/lib/jquery/jquery.js" charset="utf-8"></script>
	<script type="text/javascript" src="/lib/jqueryZtree/3.5.12/js/jquery.ztree.all-3.5.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" style="margin-top: 10px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">角色名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="roleName" id="roleName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">角色编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="roleCode" id="roleCode" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">角色状态：</label>
            <div class="layui-input-inline">
                 <select name="useStatus" id="useStatus" class="layui-input">
                   <option value="">请选择</option>
                 </select>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="formDemo">搜索</button>
                <button class="layui-btn layui-btn-sm" >清空</button>
            </div>
        </div>

    </div>
</form>

<!--
组织机构树

<div class="layui-row">
	<div class="layui-col-xs2">
	  <div id="deptTree" class="ztree"></div>
	</div>
	<div class="layui-col-xs10">
	  <table class="layui-hide" id="dataList" lay-filter="dataList"></table>
	</div>
</div>
-->
<table class="layui-hide" id="dataList" lay-filter="dataList"></table>

<script type="text/html" id="toolbarOrg">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加角色</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">批量删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{# if(d.useStatus==0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="statuBtn">启用</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="statuBtn">禁用</a>
    {{# } }}

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="/lib/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
<script>
    layui.use(['jquery', 'configureCom', 'configure', 'sessionFun', 'table','ztree'], function () {
		var $ = layui.jquery;
        var configure = layui.configure;
        var table = layui.table;
        var sessionFun = layui.sessionFun;
		var ztree = layui.ztree;
        var configureCom = layui.configureCom;

        var cols = [[
            {type: 'checkbox'},
            {title: '序号', type: 'numbers'},
            {field: 'roleName', width:200, title: '岗位名称'},
            {field: 'roleCode', width:250,title: '角色编码'},
            //{field: 'createTime',width:180, title: '添加时间'},
            {
                field: '', title: '状态',width:100, templet: function (d) {
                    var text = '';
                    if (d.useStatus == "0") {
                        text = '<span style="color:red;">禁用</span>'
                    } else {
                        text = '<span style="color:green;">启用</span>'
                    }
                    return text;
                }
            },
            {fixed: 'right', title: '操作',width:150, toolbar: '#barDemo', width: 250}
        ]];


        configureCom.tableRender(configure.ROLE_LIST_HTTP, {}, cols, 'dataList', 10, 'full-100', 'toolbarOrg');
        configureCom.tableSearch();
        configureCom.selectFun('USE_STATUS', '', '#useStatus',configure.SEARCH_DICT_HTTP);


        //头工具栏事件
        table.on('toolbar(dataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            sessionFun.remove(configure.SESSION_LIST_DATA);
            switch (obj.event) {
                case 'add':
                    editItem('添加角色', configure.ROLE_SAVE_HTTP);
                    break;
                case 'del':
                    var data = checkStatus.data;
                    if (!data.length) {
                        top.layer.alert('请您至少选择一条数据后再提交！');
                        return false;
                    }
                    top.layer.confirm('您真的要删除选中的数据吗？', function (index, layero) {
                        top.layer.close(index);
                        var ids = '';
                        $(data).each(function (index, item) {
                            if (!index) {
                                ids = item.roleId;
                            } else {
                                ids += ',' + item.roleId;
                            }
                        });
                        deleteFun(ids);
                    });
                    break;
            }
        });
		
		
        /**
		 * 每行操作
		 */
        table.on('tool(dataList)', function (obj) {
            var data = obj.data;
            sessionFun.set(configure.SESSION_LIST_DATA, data);
            if (obj.event === 'del') {//查看详情
                deleteFun(data.roleId);
            } else if (obj.event === 'edit') {
                editItem('修改角色', configure.ROLE_UPDATE_HTTP)
            } else if (obj.event === 'statuBtn') {
                var useStatus=data.useStatus;
                var msg="";
                if(useStatus==0){
                    msg="您真的要启用这个角色吗？";
                }else{
                    msg="您真的要禁用这个角色吗？";
                }
                top.layer.confirm(msg, function (index, layero) {
                    top.layer.close(index);
                    configureCom.postDataAjax(configure.ROLE_STATUS_HTTP, {
                        roleId: data.roleId
                    }).then(function (res) {
                        if (res.code == 0) {
                            configureCom.tableReload(true);
                        } else {
                            top.layer.alert('设置失败！')
                        }
                    });
                });
            }
        });


		/**
		 * 部门树状结构显示
		 */
		var selectDeptId = null;
		function deptZtreeFun() {
			//ztree初始化
			configureCom.getAjax(configure.DEPT_TREE_HTTP).then(function (res) {
				ztree.param.idKey = 'deptId';//父级id
				ztree.param.pIdKey = 'parentId';//子级中与父级id关联
				ztree.param.rootPId = null;//根节点id
				ztree.param.name = 'deptName'
				ztree.param.onClick = function(event, treeId, treeNode){
					selectDeptId = treeNode.deptId;
					configureCom.tableReload(false,{"deptId":selectDeptId});
				}
				ztree.init('deptTree', '', res.result);
			});
		};
		//deptZtreeFun();

		/**
		 * 删除
		 * @param {Object} ids
		 */
        function deleteFun(ids) {
            top.layer.confirm("您真的要删除这条数据吗？", function (index, layero) {
            configureCom.postDataAjax(configure.ROLE_DELETE_HTML, {roleIds: ids}).then(function (res) {
                if (res.code == 0) {
                    top.layer.msg('删除成功！');
                    configureCom.tableReload(true);
                } else {
                    top.layer.alert('删除失败！');
                }
              });
            });
        }

        /**
		 * 新增或修改字典详情
		 * @param {Object} title
		 * @param {Object} url
		 */
        function editItem(title, url) {
            top.layer.open({
                type: 2,
                title: title,
                area: configureCom.Psize1,
                content: configureCom.nocache(configure.ROLE_DETAIL_HTML),
                btn: ['保存'],
                yes: function (index, layero) {
                    var iframeWin = top.window.frames['layui-layer-iframe' + index]; //得到iframe页的窗口对
                    var data = iframeWin.getData();
					data.deptId = selectDeptId;
					console.log(data);
                    configureCom.postDataAjax(url, data).then(function (res) {
                        if (res.code == 0) {
                            top.layer.close(index);
                            top.layer.msg('保存成功！');
                            configureCom.tableReload(true);
                        } else {
                            top.layer.alert('保存失败！');
                        }
                    });
                }
            });
        }

    });

</script>
</body>
</html>